import React, { useEffect, useState } from "react";
import { apiGetList } from "../../api";
import "./style.css";
import { useNavigate } from "react-router-dom";

const Home = () => {
  const [list, setList] = useState([]);

  const navigate = useNavigate();

  useEffect(() => {
    getList();
  }, []);

  const getList = () => {
    apiGetList().then((res) => {
      console.log(res);
      setList(res.data);
    });
  };

  // 跳转详情
  const toView = (id) => {
    // ======= params   =====
    navigate(`/detail/${id}`);
    // ===== state ========
    // navigate('/detail', {
    //     state: {
    //         id: id
    //     }
    // })
    // ==========  search ==============
    // navigate(`/detail?id=${id}`);
  };

  return (
    <div className="home-box">
      {list.map((item, idx) => {
        return (
          <div
            key={idx}
            className="home-box-item"
            onClick={() => toView(item.id)}
          >
            <div style={{ background: item.color }}>
              <p>{item.title}</p>
              <span>{item.num}</span>
            </div>
          </div>
        );
      })}
    </div>
  );
};
export default Home;
